<template> 
	<view class="body" style="width: 100%;height: 100%;">
	<view class="dizhicar" v-for="(item,index) in addressList" :key="index" @click="dzchlik(index)">
		<view class="name">
			<text style="color: #303030;">联系人  : </text>
			<text style="margin-left: 16rpx;"> {{item.name}}</text>
			<view class="ad">
				<button class="ad-xg" @click.stop="buttonxg(index)">修改</button>
				<button class="ad-sc" @click.stop="deletesc(index)">删除</button>
			</view>
		</view>
		<view class="phone">
			<text style="color: #303030;">联系电话  : </text>
			<text style="margin-left: 16rpx;"> {{item.phone}}</text>
		</view>
		<view class="address">
			<text style="color: #303030;">地址信息  : </text>
			<text style="margin-left: 16rpx;"> {{item.address}}</text>
		</view>
		<view class="huadong">
			<u-switch v-model="adshow[index]" asyncChange  @change.stop="change(index)"></u-switch>
		</view> 
		<text style="float: right;margin-top:8rpx; margin-right: 16rpx;">默认地址</text> 
	</view> 
	<u-divider text="已到底部"></u-divider>
	<view class="button">
		<button style="background: #3c9cff; color: #ffffff;" @click="addbutton">增加地址</button>
	</view>
	<!-- 增加地址模态框 -->
	<u-modal :show="show" :closeOnClickOverlay="true" @confirm="addclose" @close="modalcolse" :confirmText="modaltext">
		<view class="aa">
			<view class="v-name">
				<text class="t-icon t-icon-yonghu" style="width: 48rpx; height: 48rpx; float: left;"></text>
				<text class="mname">联系人</text> 
				<input placeholder="输入姓名" class="name-input" v-model="addressInfo.name"/>
			</view>
			<view class="line" style="margin-top: 64rpx;">
				<u-line color="#2979ff"></u-line>
			</view>
			<view class="v-phone">
				<text class="t-icon t-icon-shouji" style="width: 48rpx; height: 48rpx; float: left; "></text>
				<text class="mphone">联系电话</text>
				<input placeholder="输入电话" class="phone-input" v-model="addressInfo.phone"/>
			</view>
			<view class="line" style="margin-top: 84rpx;">
				<u-line color="#2979ff"></u-line> 
			</view>
			<view class="v-address">
				<text class="t-icon t-icon-dizhi" style="width: 48rpx; height: 48rpx; float: left; "></text>
				<text class="maddress">联系地址</text>
				<input placeholder="输入地址信息" class="address-input" v-model="addressInfo.address"/>
			</view>
			<view class="line" style="margin-top: 84rpx;">
				<u-line color="#2979ff"></u-line>
			</view>
		</view>
	</u-modal>
	</view>
</template>

<script>
	import {http} from "../static/service/requestAddress/rtas.js"
	export default { 
		data() {
			return{ 
				addressList:[],//用户地址信息列表
				show:false,//模态框开关
				adshow:[],//默认地址开关
				modaltext:"确认",//模态框文字
				index:0,//修改按钮传递的修改对象的下标
				addressInfo:{
					id:"",
					name:"",
					phone:"",
					address:"",
					defaultaddress:false,
				},
			}
		},
		onShow() {
			var user = uni.getStorageSync("user")
			if(user){
			var userid = JSON.parse(uni.getStorageSync("user")).id
			uni.request({
				url:http+"user/address/"+userid,
				method:"GET",
				complete:(res)=>{
					var msg = res.data.msg
					if(res.data.code == 20021){ 
						uni.$u.toast(msg)
						this.addressList = res.data.date
						for(var i = 0;i < this.addressList.length;i++){
							this.adshow.push(this.addressList[i].defaultaddress)
						}
					}else{
						uni.$u.toast(msg)
					} 
				}
			})
			}
		},
		methods:{
			dzchlik(index){
				uni.$emit("address",this.addressList[index])
				uni.navigateBack({
				})
			},
			change(index){
				setTimeout(()=>{
					for(var i = 0;i < this.addressList.length;i++){
						if(i == index){
							this.addressList[i].defaultaddress = ! (this.addressList[i].defaultaddress)
							this.adshow[i] = ! (this.adshow[i])
						}else{
							this.addressList[i].defaultaddress = false
							this.adshow[i] = false
						}
					}
					 var userid = JSON.parse(uni.getStorageSync("user")).id
					 uni.request({
					 	url:http+"user/address/"+userid,
					 	method:"PUT",
					 	data:JSON.stringify(this.addressList),
					 	complete:(res)=> {
					 		if(res.data.code == 20041){
					 			uni.$u.toast("修改默认地址成功！")
					 		}else{
					 			uni.$u.toast("修改默认地址失败！")
					 		}
					 	}
					 })
				},500)
			},
			addbutton(){
				if(! uni.getStorageSync("user")){
					uni.$u.toast("登录后才能新增地址哦")
					return
				}
				this.show = true
			},
			//模态框确认按钮
			addclose(){ 
				
				if(this.modaltext == "确认"){
					let str = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
					if(this.addressInfo.name == ""){
						uni.$u.toast("姓名不能为空")
						return
					}else if(this.addressInfo.phone == ""){
						uni.$u.toast("电话不能为空")
					}else if(str.test(this.addressInfo.phone) == false){
						uni.$u.toast("联系电话格式错误")
						return 
					}else if(this.addressInfo.address == ""){
						uni.$u.toast("地址不能为空")
						return 
					}else{
						var userid = JSON.parse(uni.getStorageSync("user")).id
						this.addressInfo.id = userid
						this.addressInfo.defaultaddress = false
						uni.request({
							url:http+"user/address",
							method:"POST",
							data:JSON.stringify(this.addressInfo),
							complete:(res) =>{
								var msg = res.data.msg 
								if(res.data.code == 20011){  
									uni.$u.toast(msg)
									this.addressList.push(this.addressInfo)
									console.log(JSON.stringify(this.addressList))
									this.addressInfo = { //清空addressInfo
									id:"",
									name:"",
									phone:"",
									address:"",
									defaultaddress:"",
									}
								}else{
									uni.$u.toast(msg)
								}
							}
						})
						this.show = false
					}
				}else{//修改地址信息
					let str = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
					if(this.addressInfo.name == ""){
						uni.$u.toast("姓名不能为空")
						return
					}else if(this.addressInfo.phone == ""){
						uni.$u.toast("电话不能为空")
					}else if(str.test(this.addressInfo.phone) == false){
						uni.$u.toast("联系电话格式错误")
						return 
					}else if(this.addressInfo.address == ""){
						uni.$u.toast("地址不能为空")
						return 
					}else{
					var userid = JSON.parse(uni.getStorageSync("user")).id
					this.addressInfo.id = userid
					this.addressList[this.index] = this.addressInfo
					uni.request({
						url:http+"user/address/"+userid,
						method:"PUT",
						data:JSON.stringify(this.addressList),
						complete:(res)=> {
							if(res.data.code == 20041){
								uni.$u.toast(res.data.msg)
							}else{
								uni.$u.toast(res.data.msg)
							}
						}
					})
					this.show = false
					this.addressInfo = {
					id:"",
					name:"",
					phone:"",
					address:"",
					defaultaddress:"",
				}
				this.modaltext = "修改"
				}
				}		
			},
			modalcolse(){ //模态框关闭
				this.show = false
				this.modaltext = "确认"
			},
			//修改按钮
			buttonxg(index){
				this.show = true
				this.modaltext = "修改"
				this.addressInfo = this.addressList[index]
				this.index = index
			},
			//删除按钮
			deletesc(index){
				var userid = JSON.parse(uni.getStorageSync("user")).id
				uni.request({
					url:http+"user/address/"+userid+"/"+index,
					method:"DELETE",
					complete:(res)=> {
						var msg = res.data.msg
						if(res.data.code = 2031){
							uni.$u.toast(msg)
						}else{
							uni.$u.toast(msg)
						}
					}
				})
				this.addressList.splice(index,1)
			}
		}
	}
</script>

<style>
	@import url("../static/css/address.css");
	page {
		background-color: #f5f5f5;
	}
</style>